<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>计算器-ajax局部提交</title>
    <!-- 使用jquery方式进行ajax -->
    <!-- 在当前项目中引入jquery-->
    <script src = "jquery.min.js"></script>
</head>
<body>
    <div style="margin-top:50Px;margin-left:40%">
        <h2>计算器</h2>
        <!-- id是给js用的，name是form表单提交时给后端用得，等于后端的key值-->
        数值1:<input id="num1" name = "num1"><p></p>
        数值2:<input id="num2" name = "num2"><p></p>
        <!-- submit是给form表单用的,ajax用button-->

<!--        -------------------显示函数没有被定义-----------------------执行并不成功-->
        <input type = "button" value="相加" onclick="mysub()">
    </div>
    <script>
        // 实现按钮的函数
        
        function mysub(){
            //1、获取控件，进行非空校验
            var num1 = jQuery("#num1");
            var num2 = jQuery("#num2");
            //2、非空校验
            //没有输入任何信息
            if(num1.val().trim() == ""){//.trim()是去空格
                alert("抱歉，请先输入数值！");
                num1.focus();
                return false;
            }
            if(num2.val().trim() == ""){
                alert("抱歉，请先输入数值！");
                num1.focus();
                return false;
            }
            //3、发送ajax到后端:ajax是一个方法
            //需要设置：我要提交到哪个URL里面，我要传递的参数是什么，还有最终返回结果了我要怎么取处理。
            //多个值，所以用Json格式实现
            jQuery.ajax({
                url:"calculator_ajax",//请求地址
                method:"get",//请求方法类型--大小写都可以
                data:{//请求数据
                    "num1":num1.val(),
                    "num2":num2.val()
                },
                //success是一个方法，前面三个都是属性；这个方法接收了一个返回的参数，
                //返回的参数用res对象接收(名字是什么无所谓，反正是后端返回给前端的一个参数)
                success:function(res){
                    //规定后端发送给前端的是一个Json格式的数据{"code":200,"msg":"描述","data":xxx}
                    if(res.code == 200){
                        alert("计算的结果是："+res.data);
                    }else{
                        alert("操作失败！"+res.msg);
                    }
                }
            });           
        }
    </script>
</body>
</html>


